<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>学习</el-breadcrumb-item>
            <el-breadcrumb-item>todo</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card >
            <el-row>
                <el-col :span="8">
                    <el-input v-model="info" @change="handleInputChange">
                        <el-button slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                    
                </el-col>
                <el-col :span="2">
                    <el-button type="primary" @click="addInputValue">添加事项</el-button>
                </el-col>
            </el-row>
            <el-table :data="getTodoList" border stripe>
                <el-table-column type="index"></el-table-column>
                <el-table-column label="id" prop="id"></el-table-column>
                <el-table-column label="todo" prop="info"></el-table-column>
                <el-table-column label="状态">
                    <template slot-scope="slotScope">
                        <el-switch 
                            v-model="slotScope.row.status" 
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            @change="changeStatus(slotScope.row)"
                            >
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="slotScope">
                        <el-tag type="danger" @click="removeById(slotScope.row)">删除</el-tag>
                    </template>
                </el-table-column>
            </el-table>
            <div style="margin-top: 20px">
                <el-button>{{getCount}}</el-button>
                <el-button :type="viewKey=='all'?'primary':''" @click="setCurrent('all')">全部</el-button>
                <el-button :type="viewKey=='undone'?'primary':''" @click="setCurrent('undone')">未完成</el-button>
                <el-button :type="viewKey=='done'?'primary':''" @click="setCurrent('done')">已完成</el-button>
                <el-button @click="setCurrent()">清除已完成</el-button>
            </div>
        </el-card>
    </div>
</template>
<script>
import { mapState,mapGetters,mapMutations } from 'vuex';
export default {
    data(){
        return {
            info:this.$store.state.inputValue
        }
    },
    computed:{
        ...mapState(['todoList','inputValue','viewKey']),
        ...mapGetters(['getCount','getTodoList'])
    },
    created(){
        // this.queryTodoList();
        this.$store.dispatch('getList')
    },
    methods:{
        ...mapMutations(['filterTodoList','deleteById','setInputValue','changeStatusById']),
        queryTodoList(){
            this.todoList = this.filterTodoList(this.query);
            console.log(this.todoList);
            this.todoList = this.getTodoList;
        },
        removeById(row){
            this.deleteById(row.id);
        },
        setCurrent(key){
            this.$store.commit('changeViewKey',key)
        },
        handleInputChange(){
            console.log('handleInputChange');
            this.setInputValue(this.info)
            // this.$store.commit('setInputValue',this.info)
        },
        addInputValue(){
            if(this.info.trim().length<=0){
                this.$message.error('内容不能为空')
            }else{
                this.$store.commit('addItem',this.info.trim())
                this.info = ''
            }
        },
        changeStatus(row){
            console.log(row);
            // console.log(status,id);
            // const param = {
            //     status:row.status,
            //     id:row.id
            // }
            // console.log(param);
            this.changeStatusById(row)
            // this.$store.commit('changeStatusById',param)
        }
    }
}
</script>
<style lang="less" scoped>

</style>